<!--  -->
<template>
  <div class="box">
    <div class="border">
      <div class="head">
        <span class="back" @click="back">返回</span>
        <span class="title">上市公司质押比例</span>
      </div>
      <table>
        <thead>
          <tr>
            <td>序号</td>
            <td>股票代码</td>
            <td>股票简称</td>
            <td class="cur" @click="tagSort(keys[0])">
              交易日期<i
                class="icon"
                :class="['down', 'up'][sequence]"
                v-show="cur == 0"
              ></i>
            </td>
            <td class="cur" @click="tagSort(keys[1])">
              质押比例(%)<i
                class="icon"
                :class="['down', 'up'][sequence]"
                v-show="cur == 1"
              ></i>
            </td>
            <td class="cur" @click="tagSort(keys[2])">
              质押股数(股)<i
                class="icon"
                :class="['down', 'up'][sequence]"
                v-show="cur == 2"
              ></i>
            </td>
            <td class="cur" @click="tagSort(keys[3])">
              质押市值(元)<i
                class="icon"
                :class="['down', 'up'][sequence]"
                v-show="cur == 3"
              ></i>
            </td>
            <td class="cur" @click="tagSort(keys[4])">
              质押笔数<i
                class="icon"
                :class="['down', 'up'][sequence]"
                v-show="cur == 4"
              ></i>
            </td>
            <td class="cur" @click="tagSort(keys[5])">
              无限售股<br />质押数(股)<i
                class="icon"
                :class="['down', 'up'][sequence]"
                v-show="cur == 5"
              ></i>
            </td>
            <td class="cur" @click="tagSort(keys[6])">
              限售股质<br />押数(股)<i
                class="icon"
                :class="['down', 'up'][sequence]"
                v-show="cur == 6"
              ></i>
            </td>
            <td class="cur" @click="tagSort(keys[7])">
              近一年涨<br />跌幅(%)<i
                class="icon"
                :class="['down', 'up'][sequence]"
                v-show="cur == 7"
              ></i>
            </td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, i) in tableData" :key="item.id">
            <td>{{ i + 1 }}</td>
            <td>{{ item.scode }}</td>
            <td>{{ item.sname }}</td>
            <td>{{ item.trade_date }}</td>
            <td>{{ item.amtshareratio }}</td>
            <td>{{ item.bballowance }}</td>
            <td>{{ item.zysz }}</td>
            <td>{{ item.amtsharenum }}</td>
            <td>{{ item.bbyallowance }}</td>
            <td>{{ item.bbwallowance }}</td>
            <td :class="item.color">{{ item.zdf }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <m-page
      @onPage="onPage"
      :pageSize="params.pageSize"
      :currentPage="params.pageNo"
      :total="total"
    ></m-page>
  </div>
</template>

<script>
import { getPage } from "../api/index";
import mPage from "../components/mPage";
import { numberFormat } from "../script/utils";
export default {
  data() {
    return {
      sequence: 0,
      cur: 1,
      total: 0,
      tableData: [],
      params: {
        field: "amtshareratio",
        sort: "desc",
        pageNo: 1,
        pageSize: 30,
      },
      keys: [
        "trade_date",
        "amtshareratio",
        "bballowance",
        "zysz",
        "amtsharenum",
        "bbyallowance",
        "bbwallowance",
        "zdf",
      ],
    };
  },

  components: { "m-page": mPage },

  computed: {},

  mounted() {
    this.getPage();
  },

  methods: {
    back() {
      this.$router.push({ name: "home" });
    },
    tagSort(key) {
      this.sequence = this.keys[this.cur] == key ? +!this.sequence : 0;
      const index = this.keys.indexOf(key);
      this.cur = index;
      this.params.field = key;
      this.params.sort = ["desc", "asc"][this.sequence];
      this.params.pageNo = 1;
      this.getPage();
    },
    onPage(num) {
      this.params.pageNo = num;
      this.getPage();
    },
    async getPage() {
      await getPage("rate", this.params).then((back) => {
        if (back.status == 1) {
          let list = back.data.list;
          let total = back.data.total;
          this.tableData = list.map((item) => ({
            scode: item.scode,
            sname: item.sname,
            trade_date: item.trade_date,
            amtshareratio: numberFormat(item.amtshareratio),
            bballowance: numberFormat(item.bballowance*10000),
            zysz: numberFormat(item.zysz),
            amtsharenum: numberFormat(item.amtsharenum),
            bbyallowance: numberFormat(item.bbyallowance*10000),
            bbwallowance: numberFormat(item.bbwallowance*10000),
            zdf: numberFormat(item.zdf),
            color: {
              green: item.zdf < 0,
              red: item.zdf > 0,
            },
          }));
          this.total = total;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../style/var.scss";
.border {
  border: 2px solid $border;
  border-radius: 6px;
}
.box {
  background: $bg;
  .head {
    background: $border;
    line-height: 34px;
    text-align: center;
    position: relative;
    .back {
      color: #aaadb2;
      font-size: 14px;
      font-weight: 400;
      padding-left: 14px;
      position: absolute;
      left: 0;
      cursor: pointer;
      &::before {
        content: "";
        position: relative;
        top: 1px;
        margin-right: 8px;
        display: inline-block;
        width: 8px;
        height: 12px;
        background: url($PIC_URL + "/tlbypcWeb/pledge/back.png") no-repeat
          center;
      }
    }
    .title {
      font-size: 18px;
      color: #ff4e39;
      font-weight: 400;
    }
  }
  .tag {
    line-height: 28px;
    background: $border;
    border: 1px solid $bg;
    span {
      color: #b3b3b3;
      display: inline-block;
      font-size: 14px;
      border-right: 1px solid $bg;
      padding: 0 18px;
      &.cur {
        background: #35497c;
        color: #ffffff;
      }
      &.item {
        padding: 0 15px;
        cursor: pointer;
      }
    }
  }
  table {
    width: 100%;
    color: #bcbfc4;
    font-size: 15px;
    text-align: center;
    line-height: 20px;
    // table-layout: fixed;
    td {
      padding: 8px 0;
    }
    thead {
      background: #1c1d21;
      td {
        border: 1px solid #323337;
        &.cur {
          cursor: pointer;
        }
        .icon {
          display: inline-block;
          width: 7px;
          height: 9px;
          margin-left: 5px;
          &.down {
            background: url($PIC_URL + "/tlbypcWeb/pledge/grid_arrow.png")
              no-repeat center;
          }
          &.up {
            background: url($PIC_URL + "/tlbypcWeb/pledge/grid_2.png") no-repeat
              center;
          }
        }
      }
    }
    tbody {
      td {
        border: 1px solid #25262a;
        &.red {
          color: #ea2827;
        }
        &.green {
          color: #31ed24;
        }
      }
      tr:nth-of-type(2n) {
        background: #111117;
      }
    }
  }
}
</style>
